<!-- 页面 TODO 芋艿：该页面的实现代码需要优化，包括 js 和 css，以及相关的样式设计 -->
<template>
  <s-layout title="课表管理" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
    <view class="header-box" :style="[
	      {
	        marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
	        paddingTop: Number(statusBarHeight + 108) + 'rpx',
	      },
	    ]">
      <!-- 推广数据总览 -->
      <view class="team-data-box ss-flex ss-col-center ss-row-between" style="width: 100%">
        <view class="data-card" style="width: 100%">
          <view class="total-item" style="width: 100%" v-if="state.kbDetail">
            <view class="ss-p-b-6 ss-flex ss-row-between" style="padding: 10rpx 0;">
              <view class="title-text">上课地点：</view>
              <view class="subtitle-text">{{state.kbDetail.storeName}}</view>
            </view>
            <view class="ss-p-b-6 ss-flex ss-row-between" style="padding: 10rpx 0;">
              <view class="title-text">小区主理人：</view>
              <view class="subtitle-text">{{state.kbDetail.ownerName}}</view>
            </view>
            <view class="ss-p-b-6 ss-flex ss-row-between" style="padding: 10rpx 0;">
              <view class="title-text">运动陪伴师：</view>
              <view class="subtitle-text">{{state.kbDetail.teacherName}}</view>
            </view>
            <view class="ss-p-b-6 ss-flex ss-row-between" style="padding: 10rpx 0;">
              <view class="title-text">上课时间：</view>
              <view class="subtitle-text">{{state.kbDetail.startDate}}</view>
            </view>
            <view class="ss-p-b-6 ss-flex ss-row-between" style="padding: 10rpx 0;">
              <view class="title-text">下课时间：</view>
              <view class="subtitle-text">{{state.kbDetail.endDate}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="promoter-list ss-p-x-20">
      <view class="search acea-row row-between-wrapper" style="display: flex; height: 100rpx; align-items: center">
        <view class="input">
          <input placeholder="点击搜索学员名称" v-model="state.pagination.name" confirm-type="search" name="search"
            @confirm="submitForm" />
        </view>
        <uni-icons type="search" class="ss-m-l-20" size="28" @click="submitForm"></uni-icons>
      </view>
      <view class="list">
        <template v-if="state?.pagination?.list?.length">
          <block v-for="(item,index) in state.pagination.list" :key="index">
            <view class="item acea-row row-between-wrapper" style="display: flex"
              @click="sheep.$router.go(`/pages/student/add?id=${item.id}&isEdit=0`)">
              <view class="picTxt acea-row row-between-wrapper"
                style="display: flex; align-items: flex-start;width: 100%;">
                <view class="pictrue">
                  <image
                    :src="item.avatar ? sheep.$url.cdn(item.avatar) : 'https://txtdev-1252097407.cos.ap-guangzhou.myqcloud.com/static/img/shop/default_avatar.png'"
                    mode="aspectFill" />
                </view>
                <view class="text">
                  <view class="name ss-flex">
                    <text class="ss-m-r-10">{{item.name}}</text>
                    <x-icon v-if="item.sex==1" type="nan" color="#114adb" size="32"></x-icon>
                    <x-icon v-else type="nv" color="#f63b77" size="32"></x-icon>
                    <text class="ss-m-l-10">{{item.age}}岁</text>
                  </view>
                  <view>家长：{{item.parentName}}</view>
                  <view style="color: #999" @click="call(item.mobile)">联系电话：<text
                      style="color: #114adb">{{item.mobile}}</text></view>
                  <view style="color: #999">剩余课时：{{item.rest || 0}}节</view>
                  <view style="color: #999">上课状态：<text
                      :class="['sts', getXkStatusInfo(item.status).class]">{{getXkStatusInfo(item.status).text}}</text>
                  </view>
                  <view class="ss-flex ss-m-t-8">
                    <view @click.stop="xk(1,item.courseRecordId,'消课',item.status,item.rest)"
                      :class="['btn', 'ss-p-x-16','ss-p-y-8', 'ss-m-r-8',{disb: item.status !=0 || item.rest == null || item.rest == 0}]">
                      消课</view>
                    <view @click.stop="xk(2,item.courseRecordId,'请假',item.status,item.rest)"
                      :class="['btn', 'ss-p-x-16','ss-p-y-8', 'ss-m-r-8',{disb: item.status !=0 || item.rest == null || item.rest == 0}]">
                      请假</view>
                    <view @click.stop="xk(3,item.courseRecordId,'旷课',item.status,item.rest)"
                      :class="['btn', 'ss-p-x-16','ss-p-y-8',{disb: item.status !=0 || item.rest == null || item.rest == 0}]">
                      旷课</view>
                  </view>
                </view>
                <view class="right">
                  <view>
                    <!-- <view class="his-btn" @click.stop="toHis(item.id,1)">陪伴记录</view>
                    <view class="his-btn" @click.stop="toHis(item.id,2)">成长记录</view> -->
                    <view class="his-btn" @click="sheep.$router.go(`/pages/index/accompany?id=${item.id}`)">陪伴记录</view>
                    <view class="his-btn" @click="sheep.$router.go(`/pages/index/growup?id=${item.id}`)">成长记录</view>
                  </view>
                  <view class="his-btn" style="margin-bottom: 0;"
                    @click.stop="sheep.$router.go(`/pages/classes/xkDetail?id=${state.pagination.id}&studentId=${item.id}`)">
                    消课记录</view>
                </view>
              </view>
            </view>
          </block>
          <uni-load-more :status="state.loadStatus" />
        </template>
        <s-empty v-else-if="state.pagination?.list?.length === 0 && noData" text="暂无数据" />
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import {
    onLoad,
    onReachBottom
  } from '@dcloudio/uni-app';
  import {
    computed,
    reactive,
    ref
  } from 'vue';
  import _ from 'lodash-es';
  import ClassApi from '@/sheep/api/member/class';

  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
  // const agentInfo = computed(() => sheep.$store('user').agentInfo);
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');

  let noData = ref(false)
  const state = reactive({
    pagination: {
      pageNo: 1,
      pageSize: 12,
      id: '',
      name: '',
      list: [],
      total: 0,
    },
    loadStatus: '',
    kbDetail: null
  });

  //成长陪伴记录 type 1 陪伴 2 成长
  const toHis = (id, type) => {
    let url = type == 1 ? `/pages/index/accompany` : `/pages/index/growup`
    uni.setStorageSync('stuId', id);
    sheep.$router.go(url)
  }
  const submitForm = () => {
    state.pagination.list = [];
    getSkList();
  }
  // 消课状态
  const getXkStatusInfo = (status) => {
    const statusMap = {
      0: {
        class: '',
        text: '待上课'
      },
      1: {
        class: 'status-end',
        text: '消课'
      },
      2: {
        class: 'status-error',
        text: '请假'
      },
      3: {
        class: 'status-warning',
        text: '旷课'
      }
    }
    return statusMap[status]
  }
  // 格式化后台返回时间
  const formartDate = (dateString) => {
    if (dateString.length !== 8) {
      return dateString
    }
    // 截取字符串并添加分隔符
    const year = dateString.slice(0, 4);
    const month = dateString.slice(4, 6);
    const day = dateString.slice(6, 8);

    return `${year}-${month}-${day}`;
  }
  const call = (phoneNumber) => {
    uni.makePhoneCall({
      phoneNumber
    });
  }
  const xk = (val, id, txt, status, rest) => {
    if (status != 0 || rest == 0 || rest == null) return
    uni.showModal({
      title: '提示',
      content: `确定要${txt}吗？`,
      success: async (res) => {
        if (res.confirm) {
          let {
            code,
            data
          } = await ClassApi.updateStatus({
            status: val,
            id
          })

          if (code == 0) {
            state.pagination.list.forEach(item => {
              if (item.courseRecordId == id) {
                item.status = val
              }
            })
            uni.showToast({
              title: '更新成功'
            });
          }
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    })

  }

  // 获取课表详情
  const getDetail = async (id) => {
    let {
      code,
      data
    } = await ClassApi.getKbDetail({
      id
    })
    let day = formartDate(data.dateTime)
    data.startDate = day + ' ' + data.beginTime
    data.endDate = day + ' ' + data.endTime
    console.log(data)
    if (code == 0) {
      state.kbDetail = data
    }
  }
  // 获取上课记录
  const getSkList = async () => {

    let {
      code,
      data
    } = await ClassApi.getSkList({
      id: state.pagination.id,
      name: state.pagination.name
    })
    noData.value = true
    if (code !== 0) {
      return;
    }
    if (data.list.length) {
      state.pagination.list = _.concat(state.pagination.list, data.list);
    }
    state.pagination.total = data.total;
    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
  }
  onLoad(async (options) => {
    state.pagination.id = options.bjId
    getDetail(options.id)
    getSkList()
  });
  // 加载更多
  const loadMore = () => {
    if (state.loadStatus === 'noMore') {
      return;
    }
    state.pagination.pageNo++;
    getList();
  }

  // 上拉加载更多
  onReachBottom(() => {
    loadMore();
  });
</script>

<style lang="scss" scoped>
  .title-text {
    font-size: 30rpx;
    font-weight: bold;
    line-height: 42rpx;
  }

  .subtitle-text {
    font-size: 26rpx;
    font-weight: 400;
    color: $dark-9;
    line-height: 42rpx;
  }

  .l1 {
    background-color: #fff;
    height: 86rpx;
    line-height: 86rpx;
    font-size: 28rpx;
    color: #282828;
    border-bottom: 1rpx solid #eee;
    border-top-left-radius: 14rpx;
    border-top-right-radius: 14rpx;
    display: flex;
    justify-content: space-around;
  }

  .header-box {
    box-sizing: border-box;
    padding: 0 20rpx 20rpx 20rpx;
    width: 750rpx;
    z-index: 3;
    position: relative;
    // background: v-bind(headerBg) no-repeat,
    //   linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    // background-size: 750rpx 100%;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));

    // 团队信息总览
    .team-data-box {
      .data-card {
        width: 305rpx;
        background: #ffffff;
        border-radius: 20rpx;
        padding: 20rpx;

        .item-title {
          font-size: 22rpx;
          font-weight: 500;
          color: #999999;
          line-height: 30rpx;
          margin-bottom: 10rpx;
        }

        .total-item {
          margin-bottom: 30rpx;
        }

        .total-num {
          font-size: 38rpx;
          font-weight: 500;
          color: #333333;
          font-family: OPPOSANS;
        }

        .category-num {
          font-size: 26rpx;
          font-weight: 500;
          color: #333333;
          font-family: OPPOSANS;
        }
      }
    }
  }

  .list-box {
    z-index: 3;
    position: relative;
  }

  .chat-custom-right {
    .time-text {
      font-size: 22rpx;
      font-weight: 400;
      color: #999999;
    }

    .tag-box {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 21rpx;
      line-height: 30rpx;
      padding: 5rpx 10rpx;
      width: 140rpx;

      .tag-img {
        width: 34rpx;
        height: 34rpx;
        margin-right: 6rpx;
        border-radius: 50%;
      }

      .tag-title {
        font-size: 18rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 20rpx;
      }
    }
  }

  // 推荐人
  .referrer-box {
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
    padding: 20rpx;

    .referrer-avatar {
      width: 34rpx;
      height: 34rpx;
      border-radius: 50%;
    }
  }

  .promoter-list .nav {
    background-color: #fff;
    height: 86rpx;
    line-height: 86rpx;
    font-size: 28rpx;
    color: #282828;
    border-bottom: 1rpx solid #eee;
    border-top-left-radius: 14rpx;
    border-top-right-radius: 14rpx;
    margin-top: -30rpx;
  }

  .promoter-list .nav .item.on {
    border-bottom: 5rpx solid;
    // $theme-color
    color: var(--ui-BG-Main);
    // $theme-color
  }

  .promoter-list .search {
    width: 100%;
    background-color: #fff;
    height: 100rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    border-bottom-left-radius: 14rpx;
    border-bottom-right-radius: 14rpx;
  }

  .promoter-list .search .input {
    width: 592rpx;
    height: 60rpx;
    border-radius: 50rpx;
    background-color: #f5f5f5;
    text-align: center;
    position: relative;
  }

  .promoter-list .search .input input {
    height: 100%;
    font-size: 26rpx;
    width: 610rpx;
    text-align: center;
  }

  .promoter-list .search .input .placeholder {
    color: #bbb;
  }

  .promoter-list .search .input .iconfont {
    position: absolute;
    right: 28rpx;
    color: #999;
    font-size: 28rpx;
    top: 50%;
    transform: translateY(-50%);
  }

  .promoter-list .search .iconfont {
    font-size: 32rpx;
    color: #515151;
    height: 60rpx;
    line-height: 60rpx;
  }

  .promoter-list .list {
    margin-top: 20rpx;
  }

  .promoter-list .list .sortNav {
    background-color: #fff;
    height: 76rpx;
    border-bottom: 1rpx solid #eee;
    color: #333;
    font-size: 28rpx;
    border-top-left-radius: 14rpx;
    border-top-right-radius: 14rpx;
  }

  .promoter-list .list .sortNav .sortItem {
    text-align: center;
    flex: 1;
  }

  .promoter-list .list .sortNav .sortItem image {
    width: 24rpx;
    height: 24rpx;
    margin-left: 6rpx;
    vertical-align: -3rpx;
  }

  .promoter-list .list .item {
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
    // height: 152rpx;
    padding: 20rpx 24rpx;
    font-size: 24rpx;
    color: #666;
  }

  .promoter-list .list .item .picTxt .pictrue {
    width: 106rpx;
    height: 106rpx;
    border-radius: 50%;
    font-size: 0;
  }

  .promoter-list .list .item .picTxt .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3rpx solid #fff;
    box-shadow: 0 0 10rpx #aaa;
    box-sizing: border-box;
  }

  .promoter-list .list .item .picTxt .text {
    // width: 304rpx;
    font-size: 24rpx;
    color: #666;
    margin-left: 14rpx;
  }

  .promoter-list .list .item .picTxt .text .name {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 12rpx;
    font-weight: bold;
  }

  .promoter-list .list .item .right {
    font-size: 22rpx;
    color: #333;
    justify-content: space-between;
    flex-direction: column;
    display: flex;
    margin-left: auto;
    height: 100%;
  }

  .promoter-list .list .item .right .num {
    margin-right: 7rpx;
  }

  .sts {
    color: #999;

    &.status-error {
      color: #e6a23c;
    }

    &.status-end {
      color: #409eff;
    }

    &.status-warning {
      color: #f56c6c;
    }
  }

  .his-btn {
    border: 1px solid #666;
    line-height: 1;
    padding: 8rpx 12rpx;
    border-radius: 28rpx;
    font-size: 24rpx;
    margin-bottom: 10rpx;
  }

  .btn {
    text-align: center;
    color: #fff;
    line-height: 1;
    background: #FF6000;
    border-radius: 20rpx;

    &.disb {
      background: #b0a8a8;
    }
  }
</style>